<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/js/jquery.js"></script>
    <script src="/js/axios.min.js" type="text/javascript"></script>
    <script src="/js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p v-for="item in dataShow" :key="item.id">{{item.id}}---{{item.name}}---{{item.age}}</p>
        <input type="button" value="上一页" @click="prePage">
        <span v-for="i in pageNum" @click="page(i)" :style="{cursor: 'pointer', margin:'10px'}">{{ i }}</span>
        <input type="button" value="下一页" @click="nextPage">
    </div>
    <script>
      var vm = new Vue({
          el:'#app',
          data:{
            data: [ //模拟数据
                {id:1,name:'小明',age:12},
                {id:2,name:'小王',age:12},
                {id:3,name:'小李',age:12},
                {id:4,name:'小赵',age:12},
                {id:5,name:'小黄',age:12},
                {id:6,name:'小刘',age:12},
                {id:7,name:'小张',age:12},
                {id:7,name:'小张',age:12},
                {id:7,name:'小张',age:12},
                {id:7,name:'小张',age:12},
                {id:7,name:'小张',age:12},
                {id:7,name:'小张',age:12},
                {id:7,name:'小张',age:12},
                {id:7,name:'小张',age:12},
                {id:7,name:'小张',age:12},
                {id:7,name:'小张',age:12},
                {id:7,name:'小张',age:12},
                {id:7,name:'小张',age:12},
            ],
            totalPage: [], // 所有分页的数据
            pageSize: 5, // 每页显示数量
            pageNum: 1,  // 共几页=所有数据/每页现实数量     
            dataShow: [], // 当前显示的数据  
            currentPage: 0 // 默认当前显示第一页
          },
          created(){
            this.pageNum = Math.ceil(this.data.length / this.pageSize) || 1;//计算有多少页数据，默认为1
            // 循环页面
            for (let i = 0; i < this.pageNum; i++) {
            // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
            // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为2， 则第一页是1-2条，即slice(0,2)，第二页是3-4条，即slice(3,4)以此类推
            this.totalPage[i] = this.data.slice(this.pageSize * i, this.pageSize * (i + 1))
            }
            // 获取到数据后默认显示第一页内容
            this.dataShow = this.totalPage[this.currentPage];
          },
          methods:{
            // 下一页
            nextPage() {
              if (this.currentPage === this.pageNum - 1) return ;
              this.dataShow = this.totalPage[++this.currentPage];
            },
            // 上一页
            prePage() {
              if (this.currentPage === 0) return ;
              this.dataShow = this.totalPage[--this.currentPage];
            },
            // 点击页码
            page(i){
                this.currentPage = i
                this.dataShow = this.totalPage[i-1];
            }
          }
      })
    </script>
</body>
</html>
